<template>
  <div class="body">
    <section class="todoapp">
      <header class="header">
        <h1>todos</h1>
        <input
          class="new-todo"
          autofocus
          autocomplete="off"
          placeholder="What needs to be done?"
          @keyup.enter="addlist"
          v-model="inpval"
        />
      </header>
      <section class="main" v-show="todos.length">
        <input @change="allAct" class="toggle-all" type="checkbox" />
        <ul class="todo-list">
          <li class="todo" 
          v-for="(todo,index) in song" 
          :key="index" 
          :class="{completed: todo.completed,editing:todo==editedTodo}"
          >
            <!-- :class="{completed: todo.completed, editing:todo==editedTodo}} -->
            <div class="view">
              <input v-model="todo.completed" class="toggle" type="checkbox" />
              <label @dblclick="editTodo(todo)"> {{todo.title}} </label> 
              <button @click="removelist(todo)" class="destroy" ></button>
            </div>
            <input class="edit" type="text" 
              v-model="todo.title"
              @keyup.enter="enterlist(todo)"
              v-focus="todo==editedTodo"
              @keyup.esc="Esclist(todo)"
            />
          </li>
        </ul>
      </section>
      <footer class="footer" v-show="todos.length">
        <span class="todo-count">
          <strong>{{remaining}}</strong> item left
        </span>
        <ul class="filters">
          <li @click="keyfilter('all')">all</li>
          <li @click="keyfilter('active')">active</li>
          <li @click="keyfilter('completed')">completed</li>
        </ul>
        <button @click="allrom" class="clear-completed">Clear completed</button>
      </footer>
    </section>
    <footer class="info">
      <p>Double-click to edit a todo</p>
      <p>
        Written by
        <a href="http://evanyou.me">Evan You</a>
      </p>
      <p>
        Part of
        <a href="http://todomvc.com">TodoMVC</a>
      </p>
    </footer>
  </div>
</template>

<script>
import "@/assets/index.css";
import { todoStorage } from "@/bendi/bendi.js";
import { filters } from "@/filter/index";
export default {
  data() {
    return {
      todos: todoStorage.fetch(),
      inpval: "",
      editedTodo: null,
      inplist: "",
      filterss: "all",
      overlist: {}
    };
  },
  watch: {
    todos: {
      handler: function(todos) {
        todoStorage.save(todos);
      }
    },
    deep: true
  },
  methods: {
    // 新增
    addlist() {
      let value = this.inpval && this.inpval.trim();
      if (!this.inpval.trim().length) {
        return;
      } else {
        this.todos.push({
          id: this.todos.length,
          title: this.inpval,
          completed: false
        });
      }
      this.inpval = "";
    },
    // 删除
    removelist(todo) {
      // console.log(this.todos.indexOf(todo));
      this.todos.splice(this.todos.indexOf(todo), 1);
    },
    // 双击
    editTodo(todo) {
      // this.inplist = todo.title;
      this.overlist = { ...todo };
      console.log(this.overlist);

      this.editedTodo = todo;
    },
    // 回车
    enterlist(todo) {
      // todoStorage.save(todo);
      this.editedTodo = null;
    },
    keyfilter(data) {
      this.filterss = data;
    },
    allrom() {
      this.todos = filters.active(this.todos);
    },
    allAct(el) {
      let islist = el.target.checked;
      this.todos.map(v => {
        v.completed = islist;
      });
      console.log(islist);
    },
    Esclist(e) {
      this.editedTodo = null;
      console.log(this.todos.indexOf(e));
      this.todos[this.todos.indexOf(e)] = this.overlist;
    }
  },
  directives: {
    focus: {
      update(el) {
        el.focus();
      }
    }
  },
  computed: {
    remaining: function() {
      return filters.active(this.todos).length;
    },
    song: function() {
      return filters[this.filterss](this.todos);
    }
  }
};
</script>

<style scoped>
</style>